<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="" prop="productNo">
        <el-input v-model="queryParams.productNo" placeholder="请输入货号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <!-- <el-button :icon="!isOpen ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" size="mini"
          @click="shouqi">展开/收起</el-button> -->
      </el-form-item>
      <el-form-item label="" prop="salePrice">
        <el-input v-model="queryParams.salePrice" placeholder="请输入销售价格" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="" prop="tagPrice">
        <el-input v-model="queryParams.tagPrice" placeholder="请输入吊牌价格" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="" prop="firstLevelColumn">
        <el-select v-model="queryParams.firstLevelColumn" placeholder="请选择一级类目" clearable>
          <el-option v-for="dict in dict.type.sys_product_pl" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="" prop="firstLevelExtendedColumn">
        <el-select v-model="queryParams.firstLevelExtendedColumn" placeholder="请选择二级类目" filterable clearable>
          <el-option v-for="dict in dict.type.sys_product_secondary" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="secondLevelColumn">
        <!-- <el-input v-model="queryParams.secondLevelColumn" placeholder="请输入三级类目" clearable
          @keyup.enter.native="handleQuery" /> -->
        <el-select v-model="queryParams.secondLevelColumn" placeholder="请选择三级类目" filterable clearable>
          <el-option v-for="dict in dict.type.sys_product_cycle" :key="dict.label" :label="dict.label"
            :value="dict.label" />
        </el-select>
      </el-form-item>
      <div v-if="isOpen"></div>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['product:template:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['product:template:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['product:template:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['product:template:export']">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExportPic">不导出图片</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button size="mini" plain icon="el-icon-upload" @click="daoru('old')">采购-导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button size="mini" plain icon="el-icon-upload" @click="daoru('new')">商品-商品信息导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button size="mini" plain icon="el-icon-plus" @click="chatNew">添加货号</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <div ref="tableDom">
      <u-table :maxHeight="templateList.length ? tableHeight : 'auto'" v-loading="loading" :data="templateList"
        @selection-change="handleSelectionChange" border id="bootstrap‐table" @row-dblclick="t"
        :row-style="{ height: '110px' }" ref="table" :row-class-name="tableRowClassName" @cell-click="tableEdit"
        use-virtual :row-height="30" :height="680">
        <u-table-column :render-header="renderheader" type="selection" width="55" align="center" />
        <u-table-column :render-header="renderheader" fixed label="产品货号ID" align="center" prop="id" width="90px" />
        <u-table-column :render-header="renderheader" fixed width="90px" :label="'商品\n品牌信息'" align="center"
          prop="merchandiseBrand" />
        <u-table-column :render-header="renderheader" fixed :label="'商品\n季节'" align="center" prop="productSeason"
          width="100px" />
        <u-table-column :render-header="renderheader" fixed label="货号" align="center" prop="productNo" width="100px" />
        <u-table-column :render-header="renderheader" fixed :label="'产品图'" align="center" prop="picUrl" width="100px">
          <template slot-scope="scope">
            <image-preview :src="scope.row.picUrl" :width="80" :height="80" />

            <!-- <el-popover
              effect="light"
              trigger="click"
              placement="left"
              width="auto"
              v-show="scope.row.picUrl"
            >
              <template #default>
                <img
                  :src="pjtUrl + scope.row.picUrl"
                  style="width: 800px; height: 600px; object-fit: contain"
                />
              </template>
              <template #reference>
                <img
                  :src="pjtUrl + scope.row.picUrl"
                  style="width: 60px; height: 60px; object-fit: contain"
                />
              </template>
            </el-popover> -->
          </template>
        </u-table-column>

        <u-table-column :render-header="renderheader" fixed label="颜色" align="center" prop="colorPropertyStr" width="180">
          <template slot-scope="scope">
            <mypopover :popoverInput="scope.row.colorPropertyStr" />
          </template>
        </u-table-column>
        <u-table-column :render-header="renderheader" label="一级类目" align="center" prop="firstLevelColumn" />
        <u-table-column width="140" :render-header="renderheader" label="二级类目" align="center"
          prop="firstLevelExtendedColumn" />
        <u-table-column width="140" :render-header="renderheader" label="三级类目" align="center" prop="secondLevelColumn" />
        <u-table-column :render-header="renderheader" :label="'运营\n层级'" align="center" prop="operationLevel" />
        <u-table-column :render-header="renderheader" label="销售价格" align="center" prop="salePrice" />
        <u-table-column :render-header="renderheader" label="吊牌价格" align="center" prop="tagPrice" />

        <!-- <u-table-column :render-header="renderheader" label="logo名称" align="center" prop="logoName" />
      <u-table-column :render-header="renderheader" label="logo图片" align="center" prop="logoFullUrl">
        <template #default="scope">
          <el-popover effect="light" trigger="click" placement="left" width="auto">
            <template #default>
              <img :src='scope.row.logoFullUrl' style="width: 300px;height: 200px;">
            </template>
            <template #reference>
              <img :src='scope.row.logoFullUrl' style="width: 100px; height: 100px" />
            </template>
          </el-popover>
        </template>
      
      </u-table-column> -->
        <!-- <u-table-column :render-header="renderheader" label="logo名称" align="center" prop="logoPosition" /> -->
        <u-table-column :render-header="renderheader" label="logo位置" align="center" prop="logoPosition" width="110px">
          <template #default="scope">
            <image-preview :src="scope.row.logoPosition" :width="80" :height="80" />

            <!-- <el-popover
              effect="light"
              trigger="click"
              placement="left"
              width="auto"
              v-show="scope.row.logoPosition"
            >
              <template #default>
                <img
                  :src="pjtUrl + scope.row.logoPosition"
                  style="width: 400px; height: 500px; object-fit: contain"
                />
              </template>
              <template #reference>
                <img
                  :src="pjtUrl + scope.row.logoPosition"
                  style="width: 80px; height: 80px; object-fit: contain"
                />
              </template>
            </el-popover> -->
          </template>
          <!-- <template slot-scope="scope">
                          <el-image style="width: 100px; height: 100px" :src="scope.row.logoFullUrl"></el-image></template> -->
        </u-table-column>
        <u-table-column :render-header="renderheader" label="生产厂家代码" align="center" prop="manufacturerCodeStr"
          width="180" />
        <u-table-column :render-header="renderheader" prop="fabricComposition" width="250px" :label="'面料成分'"
          align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <span>{{ scope.row.fabricComposition }}</span>
              <div slot="reference">
                <span class="textname">{{ scope.row.fabricComposition }} </span>
              </div>
            </el-popover>
          </template>
        </u-table-column>
        <u-table-column :render-header="renderheader" label="颜色配置" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" @click="go(scope.row)"> 配置 </el-button>
          </template>
        </u-table-column>
        <u-table-column :render-header="renderheader" label="辅料备注" align="center" prop="remark" width="110">
          <template slot-scope="scope">
            <el-button size="mini" @click="goto(scope.row)">
              修改记录
            </el-button>
          </template>
        </u-table-column>

        <!-- <u-table-column :render-header="renderheader" show-overflow-tooltip width="200px" :label="'文案\n精细化详情页'" align="center"
                prop="copywritingDetailPage" /> -->
        <u-table-column :render-header="renderheader" width="100px" :label="'采购\n织坯期(天)'" align="center"
          prop="procureWeavingPeriod" />
        <u-table-column :render-header="renderheader" width="100px" :label="'采购\n染色期(天)'" align="center"
          prop="procureStainPeriod" />

        <u-table-column :render-header="renderheader" width="100px" :label="'设计\n设计师'" align="center"
          prop="designDesigners" />
        <u-table-column :render-header="renderheader" width="100px" :label="'设计\n系列'" align="center"
          prop="designSeries" />
        <u-table-column :render-header="renderheader" width="100px" :label="'设计\n主题'" align="center" prop="mainScene" />
        <u-table-column :render-header="renderheader" width="100px" :label="'设计\n场景名'" align="center"
          prop="designScene" />
        <u-table-column :render-header="renderheader" width="300px" :label="'设计\n拍摄场景建议'" align="center"
          prop="designShootingScene">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.designShootingScene }}</span> -->
              <el-input v-model="scope.row.designShootingScene" :min-height="192" type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }" :style="{ width: '100%' }" :disabled="true" />
              <div slot="reference">
                <span class="textname">{{ scope.row.designShootingScene }}
                </span>
              </div>
            </el-popover>
          </template>
        </u-table-column>

        <u-table-column :render-header="renderheader" width="100px" :label="'采购\n面料功能'" align="center"
          prop="designFabricFunction" />
        <u-table-column :render-header="renderheader" width="250px" :label="'采购\n面料名称'" align="center"
          prop="designFabricName">
          <template v-slot:header>
            <div>
              <span class="table-heard-filter">采购</span>
            </div>
            <div @click="chatdesignFabricName">
              <span class="table-heard-filter">主面料名称</span>
              <i class="el-icon-caret-bottom"></i>
            </div>
          </template>
        </u-table-column>

        <!-- <u-table-column :render-header="renderheader" width="100px" :label="'设计\n产品分类'" align="center" prop="designProductCategories" /> -->
        <u-table-column :render-header="renderheader" width="250px" :label="'设计\n胸垫/裤裆'" align="center"
          prop="designChestPad">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <span>{{ scope.row.designChestPad }}</span>
              <div slot="reference">
                <span class="textname">{{ scope.row.designChestPad }} </span>
              </div>
            </el-popover>
          </template>
        </u-table-column>
        <u-table-column :render-header="renderheader" width="110px" :label="'设计\n防震程度/腰高'" align="center"
          prop="designShockproofDegree" />
        <u-table-column :render-header="renderheader" width="100px" :label="'设计\n聚拢程度'" align="center"
          prop="designGatheringDegree" />
        <u-table-column :render-header="renderheader" width="100px" :label="'设计\n里料材质'" align="center"
          prop="designLiningMaterial" />
        <u-table-column :render-header="renderheader" width="100px" :label="'设计\n建议尺码'" align="center"
          prop="designRecommendedSizes" />
        <!-- <u-table-column :render-header="renderheader" width="100px" :label="'设计\n尺码'" align="center" prop="designSize" /> -->
        <u-table-column :render-header="renderheader" prop="designSize" width="100px" :label="'设计\n尺码'" align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.designSize }}</span> -->
              <el-input v-model="scope.row.designSize" :min-height="192" type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }" :style="{ width: '100%' }" :disabled="true" />
              <div slot="reference">
                <span class="textname">{{ scope.row.designSize }} </span>
              </div>
            </el-popover>
          </template>
        </u-table-column>
        <u-table-column :render-header="renderheader" prop="designSpecialPresentation" width="100px" :label="'设计\n特别呈现卖点'"
          align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.designSpecialPresentation }}</span> -->
              <el-input v-model="scope.row.designSpecialPresentation" :min-height="192" type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }" :style="{ width: '100%' }" :disabled="true" />
              <div slot="reference">
                <span class="textname">{{ scope.row.designSpecialPresentation }}
                </span>
              </div>
            </el-popover>
          </template>
        </u-table-column>
        <!-- <u-table-column :render-header="renderheader" show-overflow-tooltip width="200px" :label="'文案\n精细化详情页'" align="center"
                prop="copywritingDetailPage" /> -->
        <!-- <u-table-column :render-header="renderheader" prop="copywritingDetailPage" width="100px" :label="'文案\n精细化详情页'" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="bottom" width="300">
            <span>{{ scope.row.copywritingDetailPage }}</span>
            <div slot="reference">
              <span
                style="
                                                                                                                                                                                                                                                                                                                                                                                  display: -webkit-box;;
                                                                                                                                                                                                                                                                                                                                                                                  text-overflow: ellipsis;
                                                                                                                                                                                                                                                                                                                                                                                  overflow: hidden;
                                                                                                                                                                                                                                                                                                                                                                                  -webkit-line-clamp: 2;
                                                                                                                                                                                                                                                                                                                                                                                  -webkit-box-orient: vertical;
                                                                                                                                                                                                                                                                                                                                                                                  white-space: pre-wrap; ">
                {{ scope.row.copywritingDetailPage }}
              </span>
            </div>
          </el-popover>
        </template>
      </u-table-column> -->
        <u-table-column :render-header="renderheader" prop="copywritingDetailPage" width="100px" :label="'文案\n精细化详情页'"
          align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.copywritingDetailPage }}</span> -->
              <el-input v-model="scope.row.copywritingDetailPage" :min-height="192" type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }" :style="{ width: '100%' }" :disabled="true" />
              <div slot="reference">
                <span class="textname">{{ scope.row.copywritingDetailPage }}
                </span>
              </div>
            </el-popover>
          </template>
        </u-table-column>

        <!-- <u-table-column :render-header="renderheader" width="100px" :label="'文案\n功能展示'" align="center" prop="copywritingFunctionDisplay" /> -->
        <u-table-column :render-header="renderheader" prop="copywritingFunctionDisplay" width="100px" :label="'文案\n功能展示'"
          align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.copywritingFunctionDisplay }}</span> -->
              <el-input v-model="scope.row.copywritingFunctionDisplay" :min-height="192" type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }" :style="{ width: '100%' }" :disabled="true" />
              <div slot="reference">
                <span class="textname">{{ scope.row.copywritingFunctionDisplay }}
                </span>
              </div>
            </el-popover>
          </template>
        </u-table-column>
        <!-- <u-table-column :render-header="renderheader" width="100px" :label="'文案\n细节展示'" align="center" prop="copywritingDetailShow" /> -->
        <u-table-column :render-header="renderheader" prop="copywritingDetailShow" width="100px" :label="'文案\n细节展示'"
          align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.copywritingDetailShow }}</span> -->
              <el-input v-model="scope.row.copywritingDetailShow" :min-height="192" type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }" :style="{ width: '100%' }" :disabled="true" />
              <div slot="reference">
                <span class="textname">{{ scope.row.copywritingDetailShow }}
                </span>
              </div>
            </el-popover>
          </template>
        </u-table-column>
        <!-- <u-table-column :render-header="renderheader" width="100px" :label="'文案\n设计原理'" align="center" prop="copywritingDesignPrinciple" /> -->
        <u-table-column :render-header="renderheader" prop="copywritingDesignPrinciple" width="100px" :label="'文案\n设计原理'"
          align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.copywritingDesignPrinciple }}</span> -->
              <el-input v-model="scope.row.copywritingDesignPrinciple" :min-height="192" type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }" :style="{ width: '100%' }" :disabled="true" />
              <div slot="reference">
                <span class="textname">{{ scope.row.copywritingDesignPrinciple }}
                </span>
              </div>
            </el-popover>
          </template>
        </u-table-column>
        <!-- <u-table-column :render-header="renderheader" width="100px" :label="'文案\n海报文案'" align="center" prop="copywritingPosterCopy" /> -->
        <u-table-column :render-header="renderheader" prop="copywritingPosterCopy" width="100px" :label="'文案\n海报文案'"
          align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.copywritingPosterCopy }}</span> -->
              <el-input v-model="scope.row.copywritingPosterCopy" :min-height="192" type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }" :style="{ width: '100%' }" :disabled="true" />
              <div slot="reference">
                <span class="textname">{{ scope.row.copywritingPosterCopy }}
                </span>
              </div>
            </el-popover>
          </template>
        </u-table-column>
        <!-- <u-table-column :render-header="renderheader" width="120px" :label="'文案\n精细化主图卖点'" align="center" prop="copywritingMainSelling" /> -->

        <u-table-column :render-header="renderheader" prop="copywritingMainSelling" width="120px" :label="'文案\n精细化主图卖点'"
          align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.copywritingMainSelling }}</span> -->
              <el-input v-model="scope.row.copywritingMainSelling" :min-height="192" type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }" :style="{ width: '100%' }" :disabled="true" />
              <div slot="reference">
                <span class="textname">
                  {{ scope.row.copywritingMainSelling }}
                </span>
              </div>
            </el-popover>
          </template>
        </u-table-column>
        <!-- <u-table-column :render-header="renderheader" width="100px" :label="'文案\n视频文案'" align="center" prop="copywritingVideo" /> -->
        <u-table-column :render-header="renderheader" prop="copywritingVideo" width="100px" :label="'文案\n视频文案'"
          align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.copywritingVideo }}</span> -->
              <el-input v-model="scope.row.copywritingVideo" :min-height="192" type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }" :style="{ width: '100%' }" :disabled="true" />
              <div slot="reference">
                <span class="textname">{{ scope.row.copywritingVideo }} </span>
              </div>
            </el-popover>
          </template>
        </u-table-column>
        <u-table-column :render-header="renderheader" width="100px" :label="'文案\n家族分类'" align="center"
          prop="copywritingFamily" />
        <u-table-column :render-header="renderheader" width="100px" :label="'文案\n面料昵称'" align="center"
          prop="copywritingFabricName" />
        <u-table-column :render-header="renderheader" width="140px" :label="'设计\n属性类别/商品描述'" align="center"
          prop="designPropertyCategory"></u-table-column>
        <u-table-column :render-header="renderheader" width="100px" :label="'设计\n版型/罩杯'" align="center"
          prop="designFitCup" />
        <u-table-column :render-header="renderheader" width="100px" :label="'设计\n适合体型'" align="center"
          prop="designSuitableBody" />
        <u-table-column :render-header="renderheader" width="100px" :label="'设计\n衣长/裤长'" align="center"
          prop="designGarmentTrouser" />
        <u-table-column :render-header="renderheader" width="100px" :label="'设计\n运动强度'" align="center"
          prop="designExerciseIntensity" />
        <u-table-column :render-header="renderheader" width="100px" :label="'设计\n弹性'" align="center"
          prop="designFlexibility" />
        <u-table-column :render-header="renderheader" width="100px" :label="'设计\n健身层级'" align="center"
          prop="designFitnessLevels" />
        <u-table-column :render-header="renderheader" width="100px" :label="'设计\n体感'" align="center"
          prop="designSomatosensory" />
        <u-table-column :render-header="renderheader" width="100px" :label="'设计\n柔软度'" align="center"
          prop="designSoftness" />
        <u-table-column :render-header="renderheader" width="100px" :label="'设计\n面料厚度'" align="center"
          prop="designFabricThickness" />
        <u-table-column :render-header="renderheader" width="100px" :label="'设计\n透气度'" align="center"
          prop="designBreathability" />

        <u-table-column :render-header="renderheader" width="100px" :label="'客服\n图片'" align="center"
          prop="customerPicture">
          <template #default="scope">
            <el-popover effect="light" trigger="click" placement="right" width="auto" v-show="scope.row.customerPicture">
              <template #default>
                <img :src="pjtUrl + scope.row.customerPicture" style="width: 400px; height: 300px; object-fit: contain" />
              </template>
              <template #reference>
                <img :src="pjtUrl + scope.row.customerPicture" style="width: 80px; height: 80px; object-fit: contain" />
              </template>
            </el-popover>
          </template>
        </u-table-column>
        <u-table-column :render-header="renderheader" width="100px" :label="'客服\n卖点提炼'" align="center"
          prop="customerSellingPoint">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.customerSellingPoint }}</span> -->
              <el-input v-model="scope.row.customerSellingPoint" :min-height="192" type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }" :style="{ width: '100%' }" :disabled="true" />
              <div slot="reference">
                <span class="textname">{{ scope.row.customerSellingPoint }}
                </span>
              </div>
            </el-popover>
          </template>
        </u-table-column>
        <u-table-column :render-header="renderheader" width="100px" :label="'客服\n产品话术'" align="center"
          prop="customerProductTalking">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.customerProductTalking }}</span> -->
              <el-input v-model="scope.row.customerProductTalking" :min-height="192" type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }" :style="{ width: '100%' }" :disabled="true" />
              <div slot="reference">
                <span class="textname">{{ scope.row.customerProductTalking }}
                </span>
              </div>
            </el-popover>
          </template>
        </u-table-column>
        <u-table-column :render-header="renderheader" width="110px" :label="'客服\n强度/适合人群'" align="center"
          prop="customerStrengthSuitable" />

        <!-- <u-table-column :render-header="renderheader" width="110px" :label="'设计\n面料检测报告'" align="center" prop="customerStrengthSuitable" /> -->

        <u-table-column :render-header="renderheader" width="110px" :label="'采购\n面料检测报告'" align="center"
          prop="fabricTestRepor">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.customerProductTalking }}</span> -->
              <el-input v-model="scope.row.fabricTestRepor" :min-height="192" type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }" :style="{ width: '100%' }" :disabled="true" />
              <div slot="reference">
                <span class="textname">{{ scope.row.fabricTestRepor }} </span>
              </div>
            </el-popover>
          </template>
          <!-- <template slot-scope="scope">
            <el-button size="mini" @click="downLoadFile(scope.row.fabricTestRepor)" v-show="scope.row.fabricTestRepor">
              下载
            </el-button>
            
          </template> -->
        </u-table-column>
      </u-table>
    </div>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="handlegetList" />

    <el-dialog title="采购-主面料名称" :visible.sync="opendesignFabricName" width="400px" append-to-body
      v-if="opendesignFabricName">
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <div class="head-container el-dialog-div">
            <el-form>
              <el-form-item label="菜单权限">
                <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
                <el-tree show-checkbox ref="dept" :data="designFabricNameList" border size="medium" empty-text="加载中，请稍候"
                  node-key="id"></el-tree>
                <!--@check="handleShootingSample" :props="defaultProps" -->
                <!-- <el-tree :data="designShootingSampleList" @check="handleShootingSample" default-expand-all
                            highlight-current show-checkbox /> -->
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer" style="margin-top: 50px">
        <el-button type="primary" @click="submitdesignFabricName">确 定</el-button>
        <el-button @click="canceldesignFabricName">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="openadd" width="500px" height="100%" append-to-body v-if="openadd">
      <div class="el-dialog-div">
        <el-form ref="form" :model="form" :rules="rules" label-width="130px" autocomplete="off">
          <!-- <el-col :span="6"> -->
          <el-form-item label="采购-货号" prop="productNo">
            <el-input v-model="form.productNo" placeholder="请输入货号" />
          </el-form-item>
          <el-form-item label="品牌" prop="merchandiseBrand">
            <el-select v-model="form.merchandiseBrand" placeholder="选择品牌" clearable filterable>
              <el-option v-for="dict in dict.type.sys_product_pp" :key="dict.value" :label="dict.label"
                :value="dict.label" />
            </el-select>
          </el-form-item>
          <el-form-item label="商品-季节" prop="productSeason">
            <!-- <el-input v-model="form.productSeason" placeholder="请输入商品-季节" /> -->
            <el-select v-model="form.productSeason" placeholder="请选择商品-季节" clearable>
              <el-option v-for="dict in dict.type.sys_product_jijie" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="采购-生产厂家代码" prop="manufacturerCode">
            <el-input v-model="form.manufacturerCode" placeholder="请输入生产厂家代码" />
          </el-form-item> -->
          <el-form-item label="商品-销售价格" prop="salePrice">
            <el-input v-model="form.salePrice" placeholder="请输入销售价格" />
          </el-form-item>
          <el-form-item label="商品-吊牌价格" prop="tagPrice">
            <el-input v-model="form.tagPrice" placeholder="请输入吊牌价格" />
          </el-form-item>
          <el-form-item label="商品-一级类目" prop="firstLevelColumn">
            <!-- <el-input v-model="form.firstLevelColumn" placeholder="请输入一级栏目" /> -->
            <el-select v-model="form.firstLevelColumn" placeholder="请选择一级类目" clearable @change="changeFirst">
              <el-option v-for="dict in dict.type.sys_product_pl" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="商品-二级类目" prop="firstLevelExtendedColumn">
            <!-- <el-input v-model="form.firstLevelColumn" placeholder="请输入一级栏目" /> -->
            <el-select v-model="form.firstLevelExtendedColumn" placeholder="请选择二级类目" filterable clearable>
              <el-option v-for="dict in dict.type.sys_product_secondary" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="商品-三级类目" prop="secondLevelColumn">
            <el-input v-show="this.pj" v-model="form.secondLevelColumn" placeholder="请输入三级类目" />
            <!-- <el-input v-model="form.secondLevelColumn" placeholder="请输入三级栏目" /> -->
            <el-select v-show="!this.pj" v-model="form.secondLevelColumn" placeholder="请选择三级类目" clearable filterable
              @change="changesecond">
              <el-option v-for="dict in dict.type.sys_product_cycle" :key="dict.label" :label="dict.label"
                :value="dict.label" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="logo名称" prop="logoPosition">
          <el-input v-model="form.logoPosition" placeholder="请输入logo名称" />
        </el-form-item> -->
          <!-- <el-form-item label="logo地址" prop="logoUrl">
                                    <el-input v-model="form.logoUrl" placeholder="请输入logo地址" />
                                            </el-form-item> -->
          <!-- //-----------新增或修改方法里上传图片 -->
          <el-form-item label="采购-logo位置" prop="logoPosition">
            <el-upload ref="uploadlogoPosition" :action="imgUpload.url" :headers="imgUpload.headers"
              list-type="picture-card" :on-change="changelogoPosition" :file-list="filelogoPosition" multiple
              :on-success="uploadlogoPosition" :on-remove="Removelogourl">
              <i class="el-icon-plus"></i>
            </el-upload>
            <div id="preview" @paste="handlelogoPosition">
              <span><i class="el-icon-s-opportunity" style="color: #fb894c"></i>点击此处 将图片按Ctrl+V 粘贴至此处</span>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改产品一级信息对话框  @close="handleClose"-->
    <el-dialog :title="title" :visible.sync="open" width="95%" height="100%" append-to-body v-if="open">
      <div class="el-dialog-div">
        <el-form ref="form" :model="form" :rules="rules" label-width="130px" autocomplete="off">
          <el-col :span="7">
            <el-form-item label="采购-货号" prop="productNo">
              <el-input v-model="form.productNo" placeholder="请输入货号" />
            </el-form-item>
            <el-form-item label="品牌" prop="merchandiseBrand">
              <el-select v-model="form.merchandiseBrand" placeholder="选择品牌" clearable filterable>
                <el-option v-for="dict in dict.type.sys_product_pp" :key="dict.value" :label="dict.label"
                  :value="dict.label" />
              </el-select>
            </el-form-item>
            <el-form-item label="商品-季节" prop="productSeason">
              <!-- <el-input v-model="form.productSeason" placeholder="请输入商品-季节" /> -->
              <el-select v-model="form.productSeason" placeholder="请选择商品-季节" clearable>
                <el-option v-for="dict in dict.type.sys_product_jijie" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>

            <el-form-item label="商品-销售价格" prop="salePrice">
              <el-input v-model="form.salePrice" placeholder="请输入销售价格" />
            </el-form-item>
            <el-form-item label="商品-吊牌价格" prop="tagPrice">
              <el-input v-model="form.tagPrice" placeholder="请输入吊牌价格" />
            </el-form-item>
            <el-form-item label="商品-一级类目" prop="firstLevelColumn">
              <!-- <el-input v-model="form.firstLevelColumn" placeholder="请输入一级栏目" /> -->
              <el-select v-model="form.firstLevelColumn" placeholder="请选择一级类目" clearable @change="changeFirst">
                <el-option v-for="dict in dict.type.sys_product_pl" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="商品-二级类目" prop="firstLevelExtendedColumn">
              <!-- <el-input v-model="form.firstLevelColumn" placeholder="请输入一级栏目" /> -->
              <el-select v-model="form.firstLevelExtendedColumn" placeholder="请选择二级类目" clearable filterable>
                <el-option v-for="dict in dict.type.sys_product_secondary" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="商品-三级类目" prop="secondLevelColumn">
              <el-input v-show="this.pj" v-model="form.secondLevelColumn" placeholder="请输入三级类目" />
              <!-- <el-input v-model="form.secondLevelColumn" placeholder="请输入三级栏目" /> -->
              <el-select v-show="!this.pj" v-model="form.secondLevelColumn" placeholder="请选择三级类目" filterable clearable
                @change="changesecond">
                <el-option v-for="dict in dict.type.sys_product_cycle" :key="dict.label" :label="dict.label"
                  :value="dict.label" />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="logo名称" prop="logoPosition">
          <el-input v-model="form.logoPosition" placeholder="请输入logo名称" />
        </el-form-item> -->
            <!-- <el-form-item label="logo地址" prop="logoUrl">
                                    <el-input v-model="form.logoUrl" placeholder="请输入logo地址" />
                                            </el-form-item> -->
            <!-- //-----------新增或修改方法里上传图片 -->
            <el-form-item label="采购-logo位置" prop="logoPosition">
              <el-upload ref="uploadlogoPosition" :action="imgUpload.url" :headers="imgUpload.headers"
                list-type="picture-card" :on-change="changelogoPosition" :file-list="filelogoPosition" multiple
                :on-success="uploadlogoPosition" :on-remove="Removelogourl">
                <i class="el-icon-plus"></i>
              </el-upload>
              <div id="preview" @paste="handlelogoPosition">
                <span><i class="el-icon-s-opportunity" style="color: #fb894c"></i>点击此处 将图片按Ctrl+V 粘贴至此处</span>
              </div>
            </el-form-item>

            <el-form-item label="织坯期(天)" prop="procureWeavingPeriod">
              <el-input v-model="form.procureWeavingPeriod" placeholder="请输入织坯期" style="width: 220px" />
            </el-form-item>
            <el-form-item label="染色期(天)" prop="procureStainPeriod">
              <el-input v-model="form.procureStainPeriod" placeholder="请输入染色期" style="width: 220px" />
            </el-form-item>
          </el-col>
          <!--@blur="updateData" @keyup.enter.native="enterBlur($event)" <el-input v-model="form.designPropertyCategory" placeholder="请输入设计-属性类别/商品描述" /> -->
          <!-- <el-input v-model="form.designPropertyCategory" placeholder="请输入属性类别" @change="change"/> -->
          <!-- <el-form-item label="设计-拍摄样板进度" prop="designShootingSample">
            <el-input v-model="proTemplateSecondry.designShootingSample" placeholder="请输入设计-拍摄样板进度" />
          </el-form-item>
          <el-form-item label="设计-培训" prop="designTraining">
            <el-input v-model="proTemplateSecondry.designTraining" placeholder="请输入设计-培训" />
          </el-form-item> -->
          <!-- <el-input v-model="form.designChestPad" placeholder="请输入设计-胸垫/裤裆" /> -->
          <!-- <el-input v-model="form.designFabricName" placeholder="请输入设计-面料名称" @blur="updateData"
                    @keyup.enter.native="enterBlur($event)" /> -->
          <!-- <el-select style="width:100%" v-model="form.designFabricName" filterable remote
                                                                                                                                :loading='lodingy' allow-create @visible-change="editSelect" default-first-option-->
          <!--               :remote-method="remoteMethod" placeholder="请选择过滤内容" blur="updateData"
                                                                                                                                @keyup.enter.native="enterBlur($event)">
                                                                                                                                <el-option v-for="item in options" :key="item" :value="item">
                                                                                                                                </el-option>
                                                                                                                            </el-select>  -->
          <el-col :span="1">
            <el-form-item></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设计-设计师" prop="designDesigners">
              <!-- <el-input v-model="form.designDesigners" placeholder="请输入设计-设计师" /> -->
              <el-select v-model="form.designDesigners" placeholder="请选择设计师" clearable>
                <el-option v-for="dict in dict.type.sys_product_design" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>

            <el-form-item label="设计-面料名称" prop="designFabricName">
              <el-select v-model="form.designFabricName" placeholder="请选择面料名称" clearable @change="change" filterable>
                <el-option v-for="dict in mianliao" :key="dict" :label="dict" :value="dict" />
              </el-select>
            </el-form-item>
            <el-form-item label="设计-系列" prop="designSeries">
              <el-input v-model="form.designSeries" placeholder="请输入设计-系列" />
            </el-form-item>
            <el-form-item label="设计-主题" prop="mainScene">
              <el-input v-model="form.mainScene" placeholder="请输入设计-主题" />
            </el-form-item>
            <el-form-item label="设计-场景名" prop="designScene">
              <!-- <el-input v-model="form.designScene" placeholder="请输入设计-场景名" /> -->
              <el-select v-model="form.designScene" placeholder="请选择场景名" clearable>
                <el-option v-for="dict in dict.type.sys_product_scene" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="设计-拍摄场景建议" prop="designShootingScene">
              <!-- <el-input v-model="form.designShootingScene" placeholder="请输入设计-拍摄场景建议" /> -->
              <el-input v-model="form.designShootingScene" placeholder="请输入设计-拍摄场景建议" type="textarea"
                :autosize="{ minRows: 4, maxRows: 12 }" :style="{ width: '100%' }" />
              <el-autocomplete popper-class="autocomplete" :trigger-on-focus="false" class="inline-input"
                :fetch-suggestions="ShootingScene" placeholder="请输入" :autosize="{ minRows: 4, maxRows: 12 }"
                :style="{ width: '100%' }" :debounce="0" @select="clickShootingScene"
                v-model="designShootingScene"></el-autocomplete>
            </el-form-item>

            <el-form-item label="采购-面料功能" prop="designFabricFunction">
              <el-input v-model="form.designFabricFunction" placeholder="采购-面料功能" />
            </el-form-item>

            <!-- <el-form-item label="设计-产品分类" prop="designProductCategories">
              <el-input v-model="form.designProductCategories" placeholder="请输入设计-产品分类" />
            </el-form-item> -->
            <el-form-item label="设计-胸垫/裤裆" prop="designChestPad">
              <el-select filterable v-model="form.designChestPad" placeholder="请选择胸垫/裤裆" clearable>
                <el-option v-for="dict in kudang" :key="dict.value" :label="dict.attributesValue"
                  :value="dict.attributesValue" />
              </el-select>
            </el-form-item>
            <el-form-item label-width="150px" label="设计-防震程度/腰高" prop="designShockproofDegree">
              <!-- <el-input v-model="form.designShockproofDegree" placeholder="请输入设计-防震程度/腰高" /> -->
              <el-select filterable v-model="form.designShockproofDegree" placeholder="请选择胸垫/裤裆" clearable>
                <el-option v-for="dict in yaogao" :key="dict.value" :label="dict.attributesValue"
                  :value="dict.attributesValue" />
              </el-select>
            </el-form-item>
            <el-form-item label="设计-聚拢程度" prop="designGatheringDegree">
              <!-- <el-input v-model="form.designGatheringDegree" placeholder="请输入设计-聚拢程度" /> -->
              <el-select filterable v-model="form.designGatheringDegree" placeholder="请选择胸垫/裤裆" clearable>
                <el-option v-for="dict in julong" :key="dict.value" :label="dict.attributesValue"
                  :value="dict.attributesValue" />
              </el-select>
            </el-form-item>
            <el-form-item label="设计-里料材质" prop="designLiningMaterial">
              <!-- <el-input v-model="form.designLiningMaterial" placeholder="请输入设计-里料材质" /> -->
              <el-select v-model="form.designLiningMaterial" placeholder="里料材质" clearable>
                <el-option v-for="dict in dict.type.sys_product_yf" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="设计-建议尺码" prop="designRecommendedSizes">
              <el-input v-model="form.designRecommendedSizes" placeholder="请输入设计-建议尺码" />
            </el-form-item>
            <el-form-item label="设计-尺码" prop="designSize">
              <!-- <el-input v-model="form.designSize" placeholder="请输入设计-尺码" /> -->
              <el-input v-model="form.designSize" placeholder="请输入设计-尺码" type="textarea"
                :autosize="{ minRows: 2, maxRows: 12 }" :style="{ width: '100%' }" />
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-form-item></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设计-属性类别/商品描述" prop="designPropertyCategory" label-width="170px">
              <el-select v-model="form.designPropertyCategory" placeholder="请选择属性类别" clearable filterable>
                <el-option v-for="dict in shuxing" :key="dict.value" :label="dict.attributesValue"
                  :value="dict.attributesValue" />
              </el-select>
            </el-form-item>
            <el-form-item label="设计-版型/罩杯" prop="designFitCup">
              <el-select v-model="form.designFitCup" placeholder="请选择版型/罩杯" clearable filterable>
                <el-option v-for="dict in banxing" :key="dict.value" :label="dict.attributesValue"
                  :value="dict.attributesValue" />
              </el-select>
            </el-form-item>
            <el-form-item label="设计-适合体型" prop="designSuitableBody">
              <el-select v-model="form.designSuitableBody" placeholder="请选择适合体型" clearable filterable>
                <el-option v-for="dict in attributesList" :key="dict.value" :label="dict.attributesValue"
                  :value="dict.attributesValue" />
              </el-select>
            </el-form-item>
            <el-form-item label="设计-衣长/裤长" prop="designGarmentTrouser">
              <el-select v-model="form.designGarmentTrouser" placeholder="请选择适合衣长/裤长" clearable filterable>
                <el-option v-for="dict in yichang" :key="dict.value" :label="dict.attributesValue"
                  :value="dict.attributesValue" />
              </el-select>
            </el-form-item>
            <el-form-item label="设计-运动强度" prop="designExerciseIntensity">
              <el-input v-model="form.designExerciseIntensity" placeholder="请输入设计-运动强度" />
            </el-form-item>
            <el-form-item label="设计-弹性" prop="designFlexibility">
              <el-input v-model="form.designFlexibility" placeholder="请输入设计-弹性" />
            </el-form-item>
            <el-form-item label="设计-健身层级" prop="designFitnessLevels">
              <el-input v-model="form.designFitnessLevels" placeholder="请输入设计-健身层级" />
            </el-form-item>
            <el-form-item label="设计-体感" prop="designSomatosensory">
              <el-input v-model="form.designSomatosensory" placeholder="请输入设计-体感" />
            </el-form-item>
            <el-form-item label="设计-柔软度" prop="designSoftness">
              <el-input v-model="form.designSoftness" placeholder="请输入设计-柔软度" />
            </el-form-item>
            <el-form-item label="设计-面料厚度" prop="designFabricThickness">
              <el-input v-model="form.designFabricThickness" placeholder="请输入设计-面料厚度" />
            </el-form-item>
            <el-form-item label="设计-透气度" prop="designBreathability">
              <el-input v-model="form.designBreathability" placeholder="请输入设计-透气度" />
            </el-form-item>
            <el-form-item label="特别呈现卖点" prop="designSpecialPresentation">
              <el-input v-model="form.designSpecialPresentation" placeholder="请输入设计-特别呈现卖点" type="textarea"
                :autosize="{ minRows: 4, maxRows: 12 }" :style="{ width: '100%' }" />
            </el-form-item>

            <el-form-item label="关键词" prop="">
              <el-autocomplete popper-class="autocomplete" :trigger-on-focus="false" class="inline-input"
                :fetch-suggestions="queryOptions" placeholder="请输入" :autosize="{ minRows: 4, maxRows: 12 }"
                :style="{ width: '100%' }" :debounce="0" @select="clickSelect" v-model="xxxx"></el-autocomplete>
            </el-form-item>
            <el-form-item label="设计-洗涤说明" prop="designWashing">
              <el-autocomplete popper-class="autocomplete" :trigger-on-focus="false" class="inline-input"
                :fetch-suggestions="queryOption" placeholder="请输入洗涤说明" :autosize="{ minRows: 4, maxRows: 12 }"
                :debounce="0" :style="{ width: '100%' }" @select="clickSelectMark"
                v-model="form.designWashing"></el-autocomplete>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加或修改产品二级信息对话框 :on-change="handleChange"-->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="400px" append-to-body v-if="dialogVisible">
      <el-form label-width="120px">
        <el-form-item label="模板下载" prop="finalIsReturn" v-if="titleVisible == 'new'">
          <el-button size="mini" @click="downLoadTemplateFile">
            导入模板下载
          </el-button>
        </el-form-item>
        <el-form-item label="导入" prop="finalIsReturnRemark">
          <el-upload v-if="titleVisible == 'old'" :action="Upload.url" :headers="Upload.headers" :limit="limit"
            :on-exceed="handleExceed" :on-success="handlePictureSuccessDaoru" :before-upload="beforeAvatarUpload"
            :on-preview="handlePictureCardPreview" :file-list="files" :on-change="changeFile1">
            <el-button size="small" type="primary">导入文件</el-button>
          </el-upload>
          <el-upload v-if="titleVisible == 'new'" :action="newUpload.url" :headers="newUpload.headers" :limit="limit"
            :on-exceed="handleExceed" :on-success="handlePictureSuccessDaoru" :before-upload="beforeAvatarUpload"
            :on-preview="handlePictureCardPreview" :file-list="files" :on-change="changeFile1">
            <el-button size="small" type="primary">导入文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="Visible" append-to-body title="添加货号" width="500px" v-if="Visible">
      <el-form ref="f" :model="f" :rules="rules" label-width="100px" :inline="true">
        <el-form-item label="货号" prop="productNo">
          <el-input v-model="f.productNo" placeholder="请输入货号" />
        </el-form-item>
        <!-- @blur="updateData" width="900px" :inline="true"  @close="handleClose"
            @keyup.enter.native="enterBlur($event)" -->
        <!-- <el-form-item label="颜色属性" prop="colorProperty">
          <el-input v-model="form.colorProperty" placeholder="请输入颜色属性" />
        </el-form-item> 
      v-for="(nameItem, index) in noticItem" :key="nameItem.key"
      -->
        <el-row v-for="(noticItem, index) in f.colorProperty" :key="index">
          <el-col>
            <el-form-item label="颜色属性" prop="colorProperty">
              <!-- <el-input v-model="noticItem.value" placeholder="请输入颜色属性" /> -->
              <el-select v-model="noticItem.value" clearable filterable remote :remote-method="getDatas"
                :loading="loading" placeholder="请选择颜色属性">
                <el-option v-for="item in options" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-button size="mini" @click.prevent="removeDomain(noticItem)">删除</el-button>
          </el-col>
          <!-- <el-col :span="1"> -->

          <!-- </el-col> -->
        </el-row>
        <el-form-item label="尺寸" prop="proTemplateSizeList">
          <!--<el-checkbox-group v-model="checked" @change="test">
            <el-checkbox v-for="item in checkList" :key="item.id" :label="item.id">{{ item.label }}
            </el-checkbox>
                                                                                      </el-checkbox-group> -->
          <el-select v-model="checked" placeholder="请选择尺寸" clearable multiple @change="test">
            <el-option v-for="dict in dict.type.sys_product_size" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: 50px">
        <el-button type="primary" @click="submitNew">确 定</el-button>
        <!-- <el-button @click="canNew">取 消</el-button> -->
        <el-button @click="addDomain">新增</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { colorLike } from "@/api/product/secondry";
import {
  listKeyword,
  getKeyword,
  delKeyword,
  addKeyword,
  updateKeyword,
  queryContentByKey,
} from "@/api/data/keyword";
import {
  optionselect as getDictOptionselect,
  getType,
} from "@/api/system/dict/type";

import {
  listData,
  getData,
  delData,
  addData,
  updateData,
} from "@/api/system/dict/data";
import {
  listCycle,
  getCycle,
  delCycle,
  addCycle,
  updateCycle,
  selectProFabricCycleByName,
} from "@/api/data/cycle";
// import { listData, getData, getDict, delData, addData, updateData } from "@/api/data/data";
import {
  listAttributes,
  getAttributes,
  delAttributes,
  addAttributes,
  updateAttributes,
} from "@/api/data/attributes";
import {
  listFabric,
  getInfoByName,
  selectFabricNameList,
} from "@/api/data/Fabric";
import { download } from "@/utils/request";
// import { listSecondry, getSecondry, delSecondry, addSecondry, updateSecondry } from "@/api/product/secondry";
import {
  listTemplate,
  getTemplate,
  delTemplate,
  addTemplate,
  updateTemplate,
  addTemplateAndSecondry,
  addProNoColorSize,
  selectStaticWordtemplate,
} from "@/api/product/template";
import { downLoadTemplate } from "@/api/data/template";
//--------导入token
import { getToken } from "@/utils/auth";
export default {
  name: "Template",
  dicts: [
    "sys_product_qudao",
    "sys_product_size",
    "sys_product_design",
    "sys_product_scene",
    "sys_product_coder",
    "sys_product_yf",
    "sys_product_cycle",
    "sys_product_pl",
    "sys_product_jijie",
    "sys_product_secondary",
    "sys_product_pp",
  ],
  // dicts: [],
  data() {
    return {
      //全选/全不选
      menuNodeAll: false,

      // 采购-主面料名称
      designFabricNameList: [],
      designFabricName: "",
      opendesignFabricName: false,
      //搜索栏展示和收起
      isOpen: false,
      //设计-拍摄场景建议
      designShootingScene: "",
      //颜色列表
      options: [],
      // 设计-洗涤说明
      designWashing: "",
      //文案辅助输入
      xxxx: "",
      allInfos: [],

      //纵向滚动条
      tableHeight: "",
      //配件
      pj: false,

      defaultDictType: "",
      form: {},
      // 表单参数
      f: {
        colorProperty: [{ value: "" }],
      },
      // dicts: ['sys_product_design'],
      openadd: false,
      checked: [],
      Visible: false,
      //产品导入
      titleVisible: "",
      dialogVisible: false,
      files: [],
      newUpload: {
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 图片上传的方法地址:
        url:
          process.env.VUE_APP_BASE_API + "/product/template/importProductInfo",
      },
      Upload: {
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 图片上传的方法地址:
        url:
          process.env.VUE_APP_BASE_API +
          "/product/secondry/importTemplateSecondry",
      },

      //一级类目
      firstList: [],

      //面料名称
      mianliao: [],
      //胸垫/裤裆
      kudang: [],
      //衣长/裤长
      yichang: [],
      //版型
      banxing: [],
      //属性类别
      shuxing: [],
      //体形
      attributesList: [],
      // 聚拢程度
      julong: [],
      //防震程度/腰高
      yaogao: [],

      pjtUrl: process.env.VUE_APP_BASE_API,
      file: "",
      // fileLi: [{ url: "" }],
      fileLi: [],

      pjtUrl: process.env.VUE_APP_BASE_API,
      // 图片数量限制
      limit: 2,
      //logo相对路径
      logoUrl: "",
      //页面上存的暂时logo图片地址List
      // fileList: [{ url: "" }],
      filelogoPosition: [],
      //图片地址
      imageUrl: "",
      dialogVisible: false,
      imgUpload: {
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 图片上传的方法地址:
        url: process.env.VUE_APP_BASE_API + "/common/upload",
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 产品一级信息表格数据
      templateList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        productNo: null,
        manufacturerCode: null,
        salePrice: null,
        tagPrice: null,
        firstLevelColumn: null,
        secondLevelColumn: null,
        logoPosition: null,
        purchasingReportAttachments: null,
        designFabricNameList: null,
        // dictType: undefined,
      },

      // 表单校验
      rules: {
        productNo: [
          { required: true, message: "货号不能为空", trigger: "blur" },
        ],
        colorProperty: [
          { required: true, message: "颜色不能为空", trigger: "blur" },
        ],
        // manufacturerCode: [
        //   { required: true, message: "生产厂家代码不能为空", trigger: "blur" }
        // ],
        // firstLevelColumn: [
        //   { required: true, message: "一级栏目不能为空", trigger: "blur" }
        // ],
        // secondLevelColumn: [
        //   { required: true, message: "二级栏目不能为空", trigger: "blur" }
        // ],
      },
    };
  },
  mounted() {
    var _this = this;
    this.resizeTable();
    window.onresize = function () {
      _this.resizeTable();
    };
  },
  created() {
    var template = JSON.parse(localStorage.getItem("templatequeryParams"));
    if (template) {
      // this.$set(this.queryParams, storeForm)
      this.queryParams = template;
    }

    // const dictId = 24
    // this.getType(dictId);
    // this.getTypeList();
    this.getList();
    // this.getFirst()
  },
  methods: {
    //表头
    renderheader(h, { column, $index }) {
      return h("div", {}, [
        h("div", {}, column.label.split("\n")[0]),
        h("div", {}, column.label.split("\n")[1]),
      ]);
    },

    tableEdit(row, column, cell, event) {
      console.log(JSON.stringify(column));
      console.log(JSON.stringify(cell));
      let vmEl = this.$refs["table"].$el;
      console.log(vmEl);
      const scrollParent = vmEl.querySelector(".el-table__body-wrapper");
      // this.Nowscroll = scrollParent.scrollTop
      // console.log(this.queryParams);
      console.log(scrollParent.scrollTop);
      // return
      var templateList = {
        currentPage: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        scrollTop: scrollParent.scrollTop,

        // "productNo": this.queryParams.productNo,
        // "colorProperty": this.queryParams.colorProperty,
        // "manufacturerCode": this.queryParams.manufacturerCode,
        // "procureRemark": this.queryParams.procureRemark
      };
      localStorage.setItem("templateList", JSON.stringify(templateList));
      localStorage.setItem(
        "templatequeryParams",
        JSON.stringify(this.queryParams)
      );
      // if(column.label == '设计\n属性类别/商品描述'){
      //   let obj={
      //     categoryName:row.firstLevelColumn,
      //     attributesName: '属性类别'
      //   }

      //   listAttributes(obj).then(response => {
      //   // this.attributesList = response.rows;
      //   this.shuxing = response.rows
      // });

      // }
      // console.log(column.id, column.property, column, row, event, "column");
      //如果这里只想编辑某一列或几列判断一下就行：column.label === '列1'
      // if (column.label == '销售价格' | column.label == '吊牌价格') {
      //   //取出单元格的值
      //   var beforeVal = event.target.textContent;
      //   //置空单元格容器内元素
      //   event.target.innerHTML = "";
      //   //替换成el-input class='cell' class='el-input'
      //   let str = `<div >
      //       <div >
      //         <input type='text' placeholder='请输入内容' class='el-input__inner'>
      //       </div>
      //   </div>`;
      //   cell.innerHTML = str;
      //   //  获取双击后生成的input  根据层级嵌套会有所变化
      //   let cellInput = cell.children[0].children[0].children[0];
      //   cellInput.value = beforeVal;
      //   cellInput.focus(); // input自动聚焦
      //   // "TITLE_PROPER"
      //   // 失去焦点后  将input移除
      //   cellInput.onblur = () => {
      //     // class='cell'
      //     let onblurCont = `<el-input >${cellInput.value}</el-input>`;
      //     cell.innerHTML = onblurCont; // 换成原有的显示内容
      console.log(column.property);
      //     // let prop = column.property
      //     // 调用axios接口
      //     let param = {
      //       [column.property]: cellInput.value,
      //       id: row.id,
      //       productNo: row.productNo
      //     };
      //     console.log(param);

      //     updateTemplate(param).then(res => {
      //       if (res.msg == '操作成功') {
      //         this.$modal.msgSuccess("修改成功");
      //       } else {
      //         this.$modal.msgError(res.msg)
      //       }

      //     })
      //     // archiveUpdate(this.archiveData).then((response) => {
      //     //     console.log(response);
      //     //     if (response.status == "000000") {
      //     //         this.msgSuccess("修改条目成功！");
      //     //         this.dialogVisibleDetailed = false;
      //     //         // this.handleDetailed(row);
      //     //     } else {
      //     //         this.msgError(response.errors);
      //     //     }
      //     // });
      //   };
      // }
    },
    //搜索栏展示与收起
    shouqi() {
      // console.log(1);
      this.isOpen = !this.isOpen;
    },
    //
    goto(row) {
      console.log(row.id);
      this.$router.push({ path: "/product/history", query: { id: row.id } });
    },
    /* 获取颜色列表 */
    getDatas(key) {
      console.log(JSON.stringify(key));
      this.loading = true;
      // return
      colorLike(key).then((res) => {
        this.loading = false;
        this.options = res.data;
        console.log(JSON.stringify(this.options));
      });
    },

    //响应提示
    async queryOption(queryString, cb) {
      console.log("queryString:", queryString);
      let options = [];
      //查询后端相关数据
      await queryContentByKey({
        rolename: "design",
        keyword: this.form.designWashing,
      }).then((res) => {
        //赋值
        this.allInfos = res.data;
      });
      console.log(JSON.stringify(this.allInfos));
      // return
      //将结果中的gsmc提取出来
      // for (let i = 0; i < this.allInfos.length; i++) {
      //     //添加进options提示信息 注意 options的格式只能是 [...{"values":"xxx"}],如果不是这样的话，响应的result不能显示在页面上
      //     options.push({ "value": this.allInfos[i].storeCode });

      // }
      this.allInfos.forEach((item) => {
        options.push({ value: item.copywritingContent, keyword: item.keyword });
      });

      let changeQueryString = this.segmentation(queryString, [
        ",",
        "，",
        "。",
        "\n",
      ]);

      //过滤结果
      const results = changeQueryString
        ? options.filter(this.filterOptions(changeQueryString))
        : options;
      // 遍历数组，对每一项添加msg，其值为点击后应该呈现在输入框的值
      if (queryString != null) {
        results.map((item, index) => {
          results[index].msg =
            item.value !== changeQueryString
              ? queryString.slice(
                0,
                queryString.lastIndexOf(changeQueryString)
              ) + item.value
              : queryString;
          // results[index].msg = item.keyword !== changeQueryString ? queryString.slice(0, queryString.lastIndexOf(changeQueryString)) + item.keyword : queryString
        });
      }

      //回调结果
      cb(results);
    },
    // 返回一个过滤方法
    filterOptions(queryString) {
      return (state) => {
        // return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0 ||
        //     state.keyword.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        // );
        return state.value.toLowerCase().match(queryString.toLowerCase()) ||
          state.keyword.toLowerCase().match(queryString.toLowerCase())
          ? true
          : false;
      };
    },
    segmentation(queryString, arr) {
      if (queryString != null) {
        arr.map((item) => {
          queryString = queryString.slice(queryString.lastIndexOf(item) + 1);
        });
      }

      return queryString;
    },
    //点击方法
    clickSelectMark(msg) {
      console.log("msg", msg);
      this.form.designWashing = msg.msg;
      // this.designWashing = ''
      // console.log(JSON.stringify(this.proTemplate + msg.msg));

      // if (msg.msg == undefined) {
      //     this.listQuery.storeCode = msg.value;
      // } else {
      //     this.listQuery.storeCode = msg.msg;
      // }
    },
    //响应提示
    async queryOptions(queryString, cb) {
      console.log("queryString:", queryString);
      let options = [];
      //查询后端相关数据
      await queryContentByKey({ rolename: "design", keyword: this.xxxx }).then(
        (res) => {
          //赋值
          this.allInfos = res.data;
        }
      );
      console.log(JSON.stringify(this.allInfos));
      // return
      //将结果中的gsmc提取出来
      // for (let i = 0; i < this.allInfos.length; i++) {
      //     //添加进options提示信息 注意 options的格式只能是 [...{"values":"xxx"}],如果不是这样的话，响应的result不能显示在页面上
      //     options.push({ "value": this.allInfos[i].storeCode });

      // }
      this.allInfos.forEach((item) => {
        options.push({ value: item.copywritingContent, keyword: item.keyword });
      });

      let changeQueryString = this.segmentation(queryString, [
        ",",
        "，",
        "。",
        "\n",
      ]);

      //过滤结果
      const results = changeQueryString
        ? options.filter(this.filterOptions(changeQueryString))
        : options;
      // 遍历数组，对每一项添加msg，其值为点击后应该呈现在输入框的值
      if (queryString != null) {
        results.map((item, index) => {
          results[index].msg =
            item.value !== changeQueryString
              ? queryString.slice(
                0,
                queryString.lastIndexOf(changeQueryString)
              ) + item.value
              : queryString;
          // results[index].msg = item.keyword !== changeQueryString ? queryString.slice(0, queryString.lastIndexOf(changeQueryString)) + item.keyword : queryString
        });
      }

      //回调结果
      cb(results);
    },
    // 返回一个过滤方法
    filterOptions(queryString) {
      return (state) => {
        // return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0 ||
        //     state.keyword.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        // );
        return state.value.toLowerCase().match(queryString.toLowerCase()) ||
          state.keyword.toLowerCase().match(queryString.toLowerCase())
          ? true
          : false;
      };
    },
    segmentation(queryString, arr) {
      if (queryString != null) {
        arr.map((item) => {
          queryString = queryString.slice(queryString.lastIndexOf(item) + 1);
        });
      }

      return queryString;
    },
    //点击方法
    clickSelect(msg) {
      console.log("msg", msg);
      if (this.form.designSpecialPresentation == null) {
        this.form.designSpecialPresentation = msg.msg;
      } else {
        // this.proTemplate.copywritingDesignPrinciple = this.proTemplate.copywritingDesignPrinciple + msg.msg
        this.form.designSpecialPresentation =
          this.form.designSpecialPresentation + msg.msg;
      }
      // this.form.designSpecialPresentation = this.form.designSpecialPresentation + msg.msg
      this.xxxx = "";
      // console.log(JSON.stringify(this.proTemplate + msg.msg));

      // if (msg.msg == undefined) {
      //     this.listQuery.storeCode = msg.value;
      // } else {
      //     this.listQuery.storeCode = msg.msg;
      // }
    },
    /** 查询字典类型详细 */
    // getType(dictId) {
    //   getType(dictId).then(response => {
    //     console.log(JSON.stringify(response.data));
    //     this.defaultDictType = response.data.dictType
    //     // this.queryParams.dictType = response.data.dictType;
    //     // this.defaultDictType = response.data.dictType;
    //     // this.getList();
    //   });
    // },
    changesecond(val) {
      console.log(JSON.stringify(val));
      listData({ dictType: "sys_product_cycle", dictLabel: val }).then(
        (response) => {
          // this.dataList = ;
          console.log(JSON.stringify(response.rows.dictValue));

          this.form.workshopCycle = response.rows[0].dictValue;
          console.log(JSON.stringify(response.rows));
          // this.total = response.total;
          // this.loading = false;
        }
      );
    },
    // 删除
    removeDomain(item) {
      var index = this.f.colorProperty.indexOf(item);
      if (index == "0") {
        // 还有一个的时候提示不能删除
        this.$message({
          message: "不能删除了",
          type: "error",
        });
        return false;
      }
      if (index !== -1 && index !== "0") {
        this.f.colorProperty.splice(index, 1);
      }
    },
    // 表单新增
    addDomain() {
      this.f.colorProperty.push({
        value: "",
        // key: Date.now()+,
      });
    },
    test(val) {
      console.log(val);
      console.log(this.checked);
      let label = [];
      // this.checked = val;
      // this.checkList.forEach(item => {
      //   this.checked.forEach(j => {
      //     if (item.id == j) {
      //       // console.log(item.label);
      //       label.push({ size: item.label })
      //     }

      //   })

      // })
      this.checked.forEach((item) => {
        label.push({ size: item });
      });
      if (label == null) {
        this.$modal.msgError("请选择至少一个尺寸！");
        return;
      }
      console.log(JSON.stringify(label));
      this.f.proTemplateSizeList = label;

      this.$forceUpdate();
    },
    //批量上新
    chatNew(row) {
      this.Visible = true;
    },
    canNew() {
      this.Visible = false;
    },
    submitNew() {
      // return
      if (this.f.proTemplateSizeList == null) {
        this.$modal.msgError("请选择至少一个尺寸！");
        return;
      }

      let label = [];
      this.f.colorProperty.forEach((item) => {
        if (label.indexOf(item.value) == -1) {
          label.push(item.value);
        }
      });
      this.f.colorProperty = label;
      console.log(JSON.stringify(this.f.colorProperty));
      this.$refs["f"].validate((valid) => {
        if (valid) {
          if (this.f.id != null) {
            updateSecondry(this.f).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.Visible = false;
              this.getList();
            });
          } else {
            addProNoColorSize(this.f).then((response) => {
              if (response.code == 200) {
                this.$modal.msgSuccess("新增成功");
                Object.assign(this.$data, this.$options.data());
                this.getList();
                // this.f.colorProperty = []
                this.Visible = false;
              }
            });
            Object.assign(this.$data, this.$options.data());
            this.Visible = false;
            this.getList();
          }
        }
      });
    },

    //el-dialog关闭
    handleClose() {
      // Object.assign(this.$data, this.$options.data())
      this.$data = this.$options.data();
    },

    //获取一级类目
    // getFirst() {
    //   getDict('sys_product_first').then(res => {
    //     // console.log(JSON.stringify(res));
    //     this.firstList = res.data
    //   })

    // },
    //点击某一行
    t(row, column, cell, event) {
      console.log(row, column, cell, event);

      this.handleUpdate(row);
    },
    //changeFirst 改变一级类目
    changeFirst(val) {
      console.log(val);
      if (val == "配件") {
        this.pj = true;
      } else {
        this.pj = false;
      }
      this.form.firstLevelColumn = val;
      this.getyaogao(this.form.firstLevelColumn, "防震程度/腰高");
      this.getyaogao(this.form.firstLevelColumn, "聚拢程度");
      this.getyaogao(this.form.firstLevelColumn, "胸垫/裤裆");
      this.getyaogao(this.form.firstLevelColumn, "版型");
      this.getyaogao(this.form.firstLevelColumn, "属性类别");
      this.getyaogao(this.form.firstLevelColumn, "体型/胸型");
      this.getyaogao(this.form.firstLevelColumn, "衣长/裤长");
    },
    change(val) {
      console.log(val);
      // console.log(JSON.stringify(this.form.designPropertyCategory));
      getInfoByName(val).then((response) => {
        let m = [];
        m = response.data;
        console.log(JSON.stringify(m));
        this.form.designFlexibility = response.data.designFlexibility;
        this.form.designFabricFunction = response.data.designFabricFunction;
        this.form.designSpecialPresentation =
          response.data.designSpecialPresentation;
        this.form.designExerciseIntensity =
          response.data.designExerciseIntensity;
        this.form.designFitnessLevels = response.data.designFitnessLevels;
        this.form.designSomatosensory = response.data.designSomatosensory;
        this.form.designSoftness = response.data.designSoftness;
        this.form.designFabricThickness = response.data.designFabricThickness;
        this.form.designBreathability = response.data.designBreathability;
        this.form.copywritingFamily = response.data.copywritingFamily;
        this.form.copywritingFabricName = response.data.copywritingFabricName;
        this.form.fabricTestRepor = response.data.fabricTestRepor;
        this.form.procureWeavingPeriod = response.data.procureWeavingPeriod;
        this.form.procureStainPeriod = response.data.procureStainPeriod;
      });
      selectProFabricCycleByName(val).then((response) => {
        let m = [];
        m = response.data;
        console.log(JSON.stringify(m));

        // this.proTemplate.copywritingFamily = response.data.copywritingFamily
        // this.proTemplate.copywritingFabricName = response.data.copywritingFabricName
        // this.proTemplate.designFabricFunction = response.data.designFabricFunction
        // this.proTemplate.designSpecialPresentation = response.data.designSpecialPresentation
        // this.proTemplate.designExerciseIntensity = response.data.designExerciseIntensity
        // this.proTemplate.designFitnessLevels = response.data.designFitnessLevels
        // this.proTemplate.designSomatosensory = response.data.designSomatosensory
        // this.proTemplate.designSoftness = response.data.designSoftness
        // this.proTemplate.designFabricThickness = response.data.designFabricThickness
        // this.proTemplate.designBreathability = response.data.designBreathability
      });
    },
    downLoadFile(value) {
      console.log(JSON.stringify(value));
      if (!value) {
        this.$modal.msgError("该货号没有上传附件，请选择至少一个文件！");
        return;
      }

      window.location.href = this.pjtUrl + value;

      // download.resource(value)
      //根据文件路径参数，按斜杠进行分割，取得文件名，这是download函数需要的第三个参数
      let list = value.split("/");
      let fileName = list[list.length - 1];
      //这是文件路径参数，因为download函数需要传三个参数，这是第二个参数
      let params = {
        resource: value,
      };
      /** request里面的download下载函数 */
      //download函数是若依自带的，第一个参数是请求的url路径，不需要变，这个路径下的controller后台方法也是若依写好封装好了的。
      // download("/common/download/resource", params, fileName);
      // console.log("文件名");
      // console.log("value");
    },
    formatData(row) {
      let rowPerson = (row && row.colorPropertyList) || [];
      let arr = [];
      rowPerson.forEach((item) => {
        //如果数据特别多的话,还可以在这里加if判断,仅展示规定的数据
        arr.push(item);
      });
      //
      return arr.join("/");
    },
    tableRowClassName({ row, rowIndex }) {
      row.row_index = rowIndex;
    },
    /**二级配置跳转**/
    go(row) {
      // let vmEl = this.$refs["table"].$el
      // console.log(vmEl);
      // const scrollParent = vmEl.querySelector('.u-table__body-wrapper')
      // // this.Nowscroll = scrollParent.scrollTop
      // // console.log(this.queryParams);
      // console.log(scrollParent.scrollTop);
      // // return
      // var templateList = {
      //   "currentPage": this.queryParams.pageNum,
      //   "pageSize": this.queryParams.pageSize,
      //   "scrollTop": scrollParent.scrollTop,

      //   // "productNo": this.queryParams.productNo,
      //   // "colorProperty": this.queryParams.colorProperty,
      //   // "manufacturerCode": this.queryParams.manufacturerCode,
      //   // "procureRemark": this.queryParams.procureRemark

      // }
      // localStorage.setItem("templateList", JSON.stringify(templateList))
      // localStorage.setItem("template", JSON.stringify(this.queryParams))
      // console.log(row.id);
      this.$router.push({ path: "/product/secondry", query: { id: row.id } });
    },
    //分页控件
    handlegetList() {
      // localStorage.removeItem("templatequeryParams")
      this.getList();
    },
    // 面料名称
    submitdesignFabricName() {
      let j = this.getMenuAllCheckedKeysdesignFabricName();
      console.log(JSON.stringify(j));
      localStorage.setItem("designFabricNametemplate", JSON.stringify(j));

      let Data = j.map(
        (item) => this.designFabricNameList.filter((i) => i?.id == item)[0]
      );
      console.log(JSON.stringify(Data));

      const names = Data.map((user) => user.label);
      this.queryParams.designFabricNameList = names.join(",");

      this.opendesignFabricName = false;
      // this.queryParams.designShootingSampleList = this.designShootingSample

      this.getList();
    },
    // 树权限（全选/全不选）
    handleCheckedTreeNodeAll(value, type) {
      console.log(JSON.stringify(value));
      if (type == "menu") {
        this.$refs.menu.setCheckedNodes(
          value ? this.designShootingSampleList : []
        );
      } else if (type == "dept") {
        this.$refs.dept.setCheckedNodes(value ? this.designFabricNameList : []);
      }
    },
    canceldesignFabricName() {
      this.opendesignFabricName = false;
    },
    chatdesignFabricName() {
      this.getStaticWord("designFabricName");
      var applicationItem = JSON.parse(
        localStorage.getItem("designFabricNametemplate")
      );
      // var applicationItem = localStorage.getItem("application")
      if (applicationItem) {
        console.log(applicationItem);
        var that = this;

        setTimeout(function () {
          that.$nextTick(() => {
            const nodes = [];
            applicationItem.forEach((item) => {
              const node = that.$refs.dept.getNode(item);
              if (node.isLeaf) {
                //关键，过滤掉不是叶子节点的
                nodes.push(item);
              }
            });
            that.$refs.dept.setCheckedKeys(nodes, true);
          });
        }, 100);
      }
      this.opendesignFabricName = true;
    },
    // 设计-拍摄样板进度
    getStaticWord(dateName) {
      selectStaticWordtemplate({ staticWord: dateName }).then((res) => {
        console.log(JSON.stringify(res));
        if (dateName == "designShootingSample") {
          var j = [];
          res.forEach((item, index) => {
            j.push({ label: item, id: index });
          });
          this.designShootingSampleList = j;
        } else if (dateName == "designFabricName") {
          var j = [];
          res.forEach((item, index) => {
            j.push({ label: item, id: index });
          });
          this.designFabricNameList = j;
        } else if (dateName == "designSize") {
          let res = ["空白"];
          var m = [];
          res.forEach((item) => {
            if (item == "空白") {
              m.push({ label: item });
            }
          });
          console.log(JSON.stringify(m));
          this.designSizeList = m;
        }
      });
    },
    // 所有菜单节点数据
    getMenuAllCheckedKeysdesignFabricName() {
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.dept.getCheckedKeys();
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      return checkedKeys;
    },
    /** 查询产品一级信息列表 */
    getList() {
      // var templatequeryParams = JSON.parse(localStorage.getItem("templatequeryParams"))
      // if (templatequeryParams) {
      //   // this.$set(this.queryParams, storeForm)
      //   this.queryParams = templatequeryParams
      // }
      var templateList = JSON.parse(localStorage.getItem("templateList"));
      if (templateList) {
        // this.$set(this.queryParams, "pageNum", templateList.currentPage);
        // this.$set(this.queryParams, "pageSize", templateList.pageSize);

        this.Nowscroll = templateList.scrollTop;
      }
      this.loading = true;
      listTemplate(this.queryParams).then((response) => {
        this.templateList = response.rows;
        console.log(JSON.stringify(this.templateList));
        if (this.Nowscroll) {
          setTimeout(() => {
            // this.$refs["table"].bodyWrapper.scrollTop = this.Nowscroll;
            this.$refs["table"].$el.querySelector(
              ".el-table__body-wrapper"
            ).scrollTop = this.Nowscroll;
          }, 13);
        }

        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.openadd = false;
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      // this.fileList = undefined
      this.form = {
        id: null,
        productNo: null,
        manufacturerCode: null,
        salePrice: null,
        tagPrice: null,
        firstLevelColumn: null,
        secondLevelColumn: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        logoPosition: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      localStorage.removeItem("designFabricNametemplate");
      localStorage.removeItem("templateList");
      this.resetForm("queryForm");
      localStorage.removeItem("template");
      localStorage.removeItem("templatequeryParams");
      this.queryParams = {};
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      // this.fileList = undefined
      // this.$refs.logoPosition.uploadFiles = [];
      // this.$refs.logoPosition.clearFiles();
      // this.$refs.purchasingReportAttachments.clearFiles();
      this.reset();
      this.openadd = true;
      this.title = "添加产品货号信息";
    },
    // get() {
    //   console.log(JSON.stringify(this.form.firstLevelColumn));
    //   this.queryParam = { categoryName: this.form.firstLevelColumn, attributesName: '体型/胸型' }
    //   this.loading = true;
    //   listAttributes(this.queryParam).then(response => {
    //     this.attributesList = response.rows;
    //     console.log(JSON.stringify(response.rows));
    //     this.total = response.total;
    //     this.loading = false;
    //   });

    // },
    // getdesignPropertyCategory() {
    //   this.queryParam = { categoryName: this.form.firstLevelColumn, attributesName: '属性类别' }
    //   this.loading = true;
    //   listAttributes(this.queryParam).then(response => {
    //     // this.attributesList = response.rows;
    //     this.shuxing = response.rows
    //     console.log(JSON.stringify(response.rows));
    //     this.total = response.total;
    //     this.loading = false;
    //   });
    // },
    // getdesignFitCup() {
    //   this.queryParam = { categoryName: this.form.firstLevelColumn, attributesName: '版型' }
    //   this.loading = true;
    //   listAttributes(this.queryParam).then(response => {
    //     // this.attributesList = response.rows;
    //     this.banxing = response.rows
    //     console.log(JSON.stringify(response.rows));
    //     this.total = response.total;
    //     this.loading = false;
    //   });
    // },
    // getyichang() {
    //   this.queryParam = { categoryName: this.form.firstLevelColumn, attributesName: '衣长/裤长' }
    //   this.loading = true;
    //   listAttributes(this.queryParam).then(response => {
    //     // this.attributesList = response.rows;
    //     this.yichang = response.rows
    //     console.log(JSON.stringify(response.rows));
    //     this.total = response.total;
    //     this.loading = false;
    //   });
    // },
    // //裤裆
    // getkudang() {
    //   this.queryParam = { categoryName: this.form.firstLevelColumn, attributesName: '胸垫/裤裆' }
    //   this.loading = true;
    //   listAttributes(this.queryParam).then(response => {
    //     // this.attributesList = response.rows;
    //     this.kudang = response.rows
    //     console.log(JSON.stringify(response.rows));
    //     this.total = response.total;
    //     this.loading = false;
    //   });
    // },
    // // 聚拢程度
    // getjulong() {
    //   this.queryParam = { categoryName: this.form.firstLevelColumn, attributesName: '聚拢程度' }
    //   this.loading = true;
    //   listAttributes(this.queryParam).then(response => {
    //     // this.attributesList = response.rows;

    //     console.log(JSON.stringify(response.rows));
    //     this.total = response.total;
    //     this.loading = false;
    //   });
    // },
    // 防震程度/腰高
    getyaogao(categoryName, attributesName) {
      // this.queryParam = { categoryName:, attributesName: }
      this.loading = true;
      listAttributes({
        categoryName: categoryName,
        attributesName: attributesName,
      }).then((response) => {
        // this.attributesList = response.rows;
        if (attributesName == "防震程度/腰高") {
          this.yaogao = response.rows;
        } else if (attributesName == "聚拢程度") {
          this.julong = response.rows;
        } else if (attributesName == "胸垫/裤裆") {
          this.kudang = response.rows;
        } else if (attributesName == "衣长/裤长") {
          this.yichang = response.rows;
        } else if (attributesName == "版型") {
          this.banxing = response.rows;
        } else if (attributesName == "属性类别") {
          this.shuxing = response.rows;
        } else if (attributesName == "体型/胸型") {
          this.attributesList = response.rows;
        }

        console.log(JSON.stringify(response.rows));
        // this.total = response.total;
        this.loading = false;
      });
    },
    //面料名称
    getmianliao() {
      this.loading = true;
      selectFabricNameList().then((response) => {
        console.log(JSON.stringify(response));
        this.mianliao = response;
        // console.log(JSON.stringify(this.FabricList));
        // this.total = response.total;
        this.loading = false;
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getTemplate(id).then((response) => {
        this.logoUrl = response.data.logoPosition;
        this.file = response.data.purchasingReportAttachments;
        // this.fileLi = [
        //   { url: process.env.VUE_APP_BASE_API + response.data.purchasingReportAttachments }]//logo图片加的是这一行
        this.filelogoPosition = response.data.logoPosition
          ? [{ url: process.env.VUE_APP_BASE_API + response.data.logoPosition }]
          : []; //logo图片加的是这一行

        this.form = response.data;
        //防震程度/腰高
        this.getyaogao(this.form.firstLevelColumn, "防震程度/腰高");
        this.getyaogao(this.form.firstLevelColumn, "聚拢程度");
        this.getyaogao(this.form.firstLevelColumn, "胸垫/裤裆");
        this.getyaogao(this.form.firstLevelColumn, "版型");
        this.getyaogao(this.form.firstLevelColumn, "属性类别");
        this.getyaogao(this.form.firstLevelColumn, "体型/胸型");
        this.getyaogao(this.form.firstLevelColumn, "衣长/裤长");
        // 聚拢程度
        // this.getjulong()
        // //体形
        // this.get()
        // //属性类别
        // this.getdesignPropertyCategory()
        // //版型/罩杯
        // this.getdesignFitCup()
        // //衣长/裤长
        // this.getyichang()
        // //胸垫/裤
        // this.getkudang()
        //面料名称
        this.getmianliao();
        console.log(JSON.stringify(this.form));
        this.open = true;
        this.title = "修改产品货号信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.form.purchasingReportAttachments = this.file;
      this.form.logoPosition = this.logoUrl; // 注：重要(用于添加到数据库)，加的是这一行
      console.log(this.form);
      // return
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateTemplate(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              Object.assign(this.$data, this.$options.data());
              // this.$data = this.$options.data();
              this.open = false;
              this.getList();
            });
          } else {
            addTemplate(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              Object.assign(this.$data, this.$options.data());
              // this.$data = this.$options.data();
              this.openadd = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除产品货号信息编号为"' + ids + '"的数据项？')
        .then(function () {
          return delTemplate(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "product/template/export",
        {
          ...this.queryParams,
          isDownloadPic: true,
        },
        `template_${new Date().getTime()}.xlsx`
      );
    },
    /** 导出按钮操作 */
    handleExportPic() {
      this.download(
        "product/template/export",
        {
          ...this.queryParams,
          isDownloadPic: false,
        },
        `template_${new Date().getTime()}.xlsx`
      );
    },
    //图片上传前的相关判断
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg' || file.type == 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 100;
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 100MB!");
      }
      return isLt2M;
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.picUrl = file.url;
      this.imageUrl = file.url;
      this.dialogVisible = true;
    },
    handlePictureSuccessPic(res, file) {
      //设置图片访问路径 （url 后台传过来的的上传地址）
      // this.picUrl = file.response.url;
      // // const url = file.response.fileName;
      // this.picurl = file.response.urle;
      this.file = file.response.fileName;
      console.log(this.file);
    },

    //图片上传成功后的回调
    handlePictureSuccess(res, file) {
      //设置图片访问路径 （url 后台传过来的的上传地址）
      this.imageUrl = file.response.url;
      // const url = file.response.fileName;
      this.logoUrl = file.response.fileName;
      // this.handlePictureCardPreview()
      // // console.log(JSON.stringify(url));
      // this.$refs.logoPosition.clearFiles();
    },
    handlePictureSuccessDaoru(res, file) {
      // = file.response.url;
      // console.log(JSON.stringify(this.file));
      if (res.code == 200) {
        this.$modal.msgSuccess("导入成功");
        this.dialogVisible = false;

        this.getList();
        return true;
      } else {
        this.$modal.msgError(res.msg);
        this.dialogVisible = true;
        // this.$message.msgError('该颜色未在字典定义')
        return;
      }
    },

    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传链接LOGO图片数量不能超过 ${this.limit} 个!`);
    },
    changeFile1(file, fileList) {
      if (fileList.length > 1) {
        this.fileList = fileList.slice(-1);

        // this.fileList = [fileList[fileList.length - 1]]//这一步，是 展示最后一次选择文件
      }
      // this.fileSpecial = fileList;
    },

    //部门文件导入修改打开
    daoru(titleVisible) {
      this.titleVisible = titleVisible;
      this.dialogVisible = true;
    },

    downLoadTemplateFile() {
      let obj = {
        templateName: "商品货号信息模板",
      };
      downLoadTemplate(obj).then((response) => {
        window.location.href =
          process.env.VUE_APP_BASE_API + response.rows[0].templateUrl;
      });
    },
    // table自动高度
    returnTableHeight(ref, bottomOffset) {
      let height = null;
      height =
        window.innerHeight - ref.getBoundingClientRect().top - bottomOffset;
      return height;
    },

    resizeTable() {
      this.$nextTick(() => {
        this.tableHeight = this.returnTableHeight(this.$refs.tableDom, 100);
      }, 0);
    },

    //handlelogoPosition图片
    handlelogoPosition(event) {
      const items = (event.clipboardData || window.clipboardData).items;
      let file = null;
      if (!items || items.length === 0) {
        this.$message.error("当前浏览器不支持本地");
        return;
      }
      // 搜索剪切板items
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") !== -1) {
          file = items[i].getAsFile();
          break;
        }
      }
      if (!file) {
        this.$message.error("粘贴内容非图片");
        return;
      }
      if (this.filelogoPosition.length >= this.limit) {
        this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); // 图片数量超出
        return;
      }
      this.$refs.uploadlogoPosition.handleStart(file); // 将粘贴过来的图片加入预上传队列
      this.$refs.uploadlogoPosition.submit(); // 提交图片上传队列
    },
    //上传
    changelogoPosition(file, fileList) {
      // this.fileList = fileList
      console.log("成功", file, fileList);
      console.log(JSON.stringify(file));
      console.log(JSON.stringify(fileList));
      if (fileList.length > 1) {
        this.filelogoPosition = fileList.slice(-1);
      }
    },
    Removelogourl() {
      this.logoUrl = "";
    },

    uploadlogoPosition(res, file, fileList) {
      console.log(JSON.stringify(file.response.fileName));
      this.logoUrl = file.response.fileName;
    },

    //响应提示
    async ShootingScene(queryString, cb) {
      console.log("queryString:", queryString);
      let options = [];
      //查询后端相关数据
      await queryContentByKey({
        rolename: "design",
        keyword: this.designShootingScene,
      }).then((res) => {
        //赋值
        this.allInfos = res.data;
      });
      console.log(JSON.stringify(this.allInfos));
      // return
      //将结果中的gsmc提取出来
      // for (let i = 0; i < this.allInfos.length; i++) {
      //     //添加进options提示信息 注意 options的格式只能是 [...{"values":"xxx"}],如果不是这样的话，响应的result不能显示在页面上
      //     options.push({ "value": this.allInfos[i].storeCode });

      // }
      this.allInfos.forEach((item) => {
        options.push({ value: item.copywritingContent, keyword: item.keyword });
      });

      let changeQueryString = this.segmentation(queryString, [
        ",",
        "，",
        "。",
        "\n",
      ]);

      //过滤结果
      const results = changeQueryString
        ? options.filter(this.filterOptions(changeQueryString))
        : options;
      // 遍历数组，对每一项添加msg，其值为点击后应该呈现在输入框的值
      if (queryString != null) {
        results.map((item, index) => {
          results[index].msg =
            item.value !== changeQueryString
              ? queryString.slice(
                0,
                queryString.lastIndexOf(changeQueryString)
              ) + item.value
              : queryString;
          // results[index].msg = item.keyword !== changeQueryString ? queryString.slice(0, queryString.lastIndexOf(changeQueryString)) + item.keyword : queryString
        });
      }

      //回调结果
      cb(results);
    },
    // 返回一个过滤方法
    filterOptions(queryString) {
      return (state) => {
        // return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0 ||
        //     state.keyword.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        // );
        return state.value.toLowerCase().match(queryString.toLowerCase()) ||
          state.keyword.toLowerCase().match(queryString.toLowerCase())
          ? true
          : false;
      };
    },
    segmentation(queryString, arr) {
      if (queryString != null) {
        arr.map((item) => {
          queryString = queryString.slice(queryString.lastIndexOf(item) + 1);
        });
      }

      return queryString;
    },
    //点击方法
    clickShootingScene(msg) {
      console.log("msg", msg);
      if (this.form.designShootingScene == null) {
        this.form.designShootingScene = msg.msg;
      } else {
        this.form.designShootingScene = this.form.designShootingScene + msg.msg;
      }

      this.designShootingScene = "";
    },
  },
};
</script>
<style lang="scss" scoped>
.el-dialog-div {
  overflow-x: hidden;
  height: 60vh;
}

span.textname {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  width: 500px;
  color: #606266;
  background-color: white;
  border: none;
  cursor: pointer;
  resize: none;
}
</style>